<style scoped lang="scss">
.calendar-picker {
  width: 10rem;
  height: 14.7733rem;
  background-color: $white-color;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  border-radius: 0.2667rem 0.2667rem 0 0;

  .calendar-picker-header {
    width: 10rem;
    height: 3.1467rem;
    background-color: $white-color;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .calendar-picker-header-title {
      font-size: 0.48rem;
      color: #000;
    }

    .calendar-picker-header-center {
      font-size: 0.48rem;
      color: #000;
    }

    .calendar-picker-header-buttom {
      width: 10rem;
      height: 1.0667rem;
      border-bottom: 1px solid #000;
      box-sizing: border-box;

      ul {
        width: 10rem;
        height: 1.0667rem;
        display: flex;
        align-items: center;
        justify-content: space-around;

        li {
          font-size: 0.4267rem;
          color: #000;
        }
      }
    }
  }

  .calendar-picker-content {
    width: 10rem;
    height: 8.1867rem;
    background-color: $white-color;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @include horizontal-scroll-hidden;
    margin-top: 0.4rem;

    .box {
      width: 10rem;
      height: 8.1867rem;
    }

    .calendar-picker-content-bottom {
      width: 10rem;
      height: .96rem;
    }

    .calendar-picker-content-title {
      width: 10rem;
      height: 1.0667rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.4267rem;
      color: #000;
    }

    .calendar-picker-content-top {
      width: 10rem;
      height: 6.5867rem;
      margin-top: 0.2667rem;

      ul {
        width: 10rem;
        height: 1.0667rem;

        li {
          width: 1.42rem;
          height: 1.44rem;
          float: left;
          font-size: 0.4267rem;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.1rem;
        }
      }
    }
  }
}

.calendar-picker-content-bottom {
  width: 10rem;
  height: 1.0667rem;
  background-color: $white-color;
  position: absolute;
  bottom: 0;
  left: 0;

  button {
    width: 9rem;
    background-color: #ee0a24;
    height: 1.0667rem;
    font-size: 0.4267rem;
    border: 0;
    border-radius: 1rem;
    margin-left: 0.5rem;
  }
}
</style>
<template>
  <!-- 日历选择器 -->
  <div class="calendar-picker">
    <div class="calendar-picker-header">
      <div class="calendar-picker-header-title">
        <span>日期选择</span>
      </div>
      <div class="calendar-picker-header-center">
        <span>{{ currentYear }}年</span>
      </div>
      <div class="calendar-picker-header-buttom">
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
      </div>
    </div>
    <div class="calendar-picker-content">
      <div class="box" ref="box">
        <div v-for="(yearData, yearIndex) in allYearsData" :key="yearIndex">
          <div class="calendar-picker-content-title">
            <p>{{ yearData.year }}年</p>
          </div>
          <div v-for="(monthData, monthIndex) in yearData.months" :key="monthIndex">
            <div class="calendar-picker-content-title">
              <p>{{ yearData.year }}年{{ monthIndex + 1 }}月</p>
            </div>
            <div class="calendar-picker-content-top">
              <ul>
                <li v-for="(date, index) in monthData" :key="index">{{ date.day }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar-picker-content-bottom">
      <button>确认</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const currentYear = new Date().getFullYear();
    return {
      startY: 0,
      allYearsData: [], // 存储所有年份的日历数据
      currentYear: currentYear, // 当前年份
      currentMonth: new Date().getMonth() // 当前月份（0-11）
    }
  },
  mounted() {
    // 组件初始化时，生成今年包括今年前所有的年份的月份的日历
    this.generateAllYearsCalendar();
  },
  methods: {
    isToday(date) {
      const today = new Date();
      return date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate();
    },
    generateAllYearsCalendar() {
      const now = new Date();
      const currentYear = now.getFullYear();
      const allYearsData = [];

      for (let year = 1970; year <= currentYear; year++) { // 从1970年开始到当前年份
        const yearData = {
          year: year,
          months: []
        };
        for (let month = 0; month < 12; month++) { // 每个年份生成12个月的数据
          const firstDay = new Date(year, month, 1);
          const lastDay = new Date(year, month + 1, 0);
          const firstDayOfWeek = firstDay.getDay();
          const daysInMonth = lastDay.getDate();

          const monthData = [];

          // 填充当前月之前的空白日期
          for (let i = 0; i < firstDayOfWeek; i++) {
            monthData.push({ day: '', isCurrentMonth: false });
          }

          // 填充当前月的日期
          for (let i = 1; i <= daysInMonth; i++) {
            const date = new Date(year, month, i);
            monthData.push({
              day: i,
              isCurrentMonth: true,
              isToday: this.isToday(date),
              date: date
            });
          }

          yearData.months.push(monthData);
        }
        allYearsData.push(yearData);
      }

      this.allYearsData = allYearsData;
    }
  }
}
</script>
